<template>
	<!-- <view class="padding-lr32">
		<view class="modify-page">
			<image class="modify-bg" src="../../static/img/login-bg2.png" mode="widthFix"></image>
			<uv-form class="form-box">
				<uv-form-item class="form-item">
					<template v-slot:label>
						<view class="item-icon">
							<image src="/static/img/mima.png" mode="widthFix"></image>
						</view>
					</template>
					<uv-input placeholder="请输入原始支付密码" v-model="oldPwd" type="password" :clearable="false"></uv-input>

				</uv-form-item>
				<uv-form-item class="form-item">
					<template v-slot:label>
						<view class="item-icon">
							<image src="/static/img/mima.png" mode="widthFix"></image>
						</view>
					</template>
					<uv-input placeholder="请输入新支付密码" v-model="newPwd" type="password" :clearable="false"></uv-input>
				</uv-form-item>
				<uv-form-item class="form-item">
					<template v-slot:label>
						<view class="item-icon">
							<image src="/static/img/mima.png" mode="widthFix"></image>
						</view>
					</template>
					<uv-input placeholder="请再次输入新支付密码" v-model="confirmPwd" type="password"
						:clearable="false"></uv-input>
				</uv-form-item>
				<uv-form-item class="form-item">
					<template v-slot:label>
						<view class="item-icon">
							<image src="/static/img/yanzhengma.png" mode="widthFix"></image>
						</view>
					</template>
					<uv-input placeholder="请输入验证码" v-model="captcha" :clearable="false"></uv-input>
					<template v-slot:right>
						<div class="yzm-box">
							<image :src="captchaImg" @click="getCaptcha" mode="aspectFill"></image>
						</div>
					</template>
				</uv-form-item>
			</uv-form>
			<view class="fixed-bottom-inner">
				<button class="submit" @click="modifyPwd">修改支付密码</button>
			</view>
		</view>
	</view> -->
	<view class="page-main" :key="refreshKey">
		<!-- <view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>原始支付密码</text>
		</view>
		<input class="my-input animate__fadeInUp" v-model="oldPwd" type="password" placeholder="请输入您的原始支付密码" style="animation-duration: 2s;"> -->
		<view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>新的支付密码</text>
		</view>
		<view class="animate__fadeInUp" style="border-radius: 24rpx;overflow:hidden;background:#FCFCFC;animation-duration: 2s;">
			<input class="my-input" style="border-radius: 0;" v-model="newPwd" type="password" placeholder="请输入新的支付密码">
			<view style="height: 1rpx;width: 650rpx;background: #FCFCFC;margin-left: 28rpx;"></view>
			<input class="my-input" style="border-radius: 0;" v-model="confirmPwd" type="password" placeholder="请再次输入新的支付密码">
		</view>
		<view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>密钥</text>
		</view>
		<input class="my-input animate__fadeInUp" type="text" v-model="secretKey"  placeholder="请输入您的密钥" style="animation-duration: 2s;">
		<view class="btn" @click="modifyPwd">确认修改支付密码</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPwd: '',
				newPwd: '',
				confirmPwd: '',
				secretKey: '',
				refreshKey:0
			}
		},
		onLoad() {
			this.getCaptcha();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {

			getCaptcha() {
				var that = this;
				uni.$uv.http.get('/getCaptcha').then(res => {
					that.uuid = res.data.uuid;
					that.captchaImg = res.data.captchaImg;
				});
			},

			modifyPwd: function() {
				var that = this;
				// if (that.oldPwd == null || that.oldPwd == '') {
				// 	uni.showToast({
				// 		title: "请输入原密码",
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				if (that.newPwd == null || that.newPwd == '') {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					});
					return;
				}
				if (that.confirmPwd == null || that.confirmPwd == '') {
					uni.showToast({
						title: "请再输入新密码",
						icon: "none"
					});
					return;
				}
				if (that.newPwd != that.confirmPwd) {
					uni.showToast({
						title: "密码不一致",
						icon: "none"
					});
					return;
				}
				if (that.secretKey == null || that.secretKey == '') {
					uni.showToast({
						title: "请输入密钥",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/member/modifyPayPwd', {
					//oldPwd: that.oldPwd,
					newPwd: that.newPwd,
					secretKey: that.secretKey,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../my/my"
								});
							}, 2000);
						}
					});
				});
			},
		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.page-main{
		width: 100vw;
		height: 100vh;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		overflow-y: hidden;
	}

	.row-title{
		font-size: 32rpx;
		color: #000;
		margin-bottom: 20rpx;
		margin-top: 40rpx;
	}

	.my-input{
		height: 108rpx;
		padding: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #000;
		line-height: 108rpx;
        background: #FFF;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.btn{
		position: fixed;
		bottom: 126rpx;
		width: 670rpx;
		text-align: center;
        height: 100rpx;
		line-height: 100rpx;
        background: #FEE19E;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        font-size: 32rpx;
        color: #0B1327;
	}
</style>